import { useState ,useEffect} from 'react'
import logo from './logo.svg'
import className from 'classnames'
import './App.css'
import classnames from 'classnames'
import  WeUI from 'react-weui'
import Context from './components/context'
import {getContext} from './api/requset'
const {
  Toast
} = WeUI
function App() {
  const [tab, setTab] = useState('all')
  const [list, setList] = useState([])
  const [tabClasses, settabClasses] = useState('item')
  const [showLoading ,setShowLaoding] = useState(false)
  useEffect(()=> {
    setTimeout(() => {
      setTab('dj')
    }, 10000);
  
  })

  useEffect(()=> {
  //   settabClasses([
  //     ...tabClasses,
  //     'current'
  //   ])
   //console.log('/////')
   
   (async () => {
    setShowLaoding(true)
    let {data} = await getContext();
    setList([
      ...data
    ])
    setShowLaoding(false)
   })()
  //  fetch('https://www.fastmock.site/mock/759aba4bef0b02794e330cccc1c88555/beers/match')
  //  .then(data=> data.json())
  //  .then(data => {
  //   setList([
  //     ...data
  //   ])
  //   setShowLaoding(false)
  //  })
  },[tab])
  // useEffect(()=> {
  //   if(list.length>0) {
  //     setShowLaoding(false)
  //   }
  // })
  return (
    <div className="App">
      <Context data={list}/>
     <a href = "#" className= {classnames('item',{current:tab=='all'})}>全部</a>
     <Toast icon = "waiting-circle" show={showLoading}>加载中</Toast>
    </div>
  )
}

export default App
